/**index.wxss**/
@import "../../commin/commin.less";

page {
    padding-bottom: 160rpx;
}

.home-page {
    /* #ifdef MP-ALIPAY */
    background-color: #fff;
    /* #endif */
}

.show {
    display: block;
}

.hide {
    display: none;
}

.header-image {
    .position(absolute, 0, 0, 0, 0);
    .kuangao(100%, 380rpx);
}
.header-title {
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 26rpx;

    }

.header-image2 {
    .position(absolute, 0, 0, 0, 0);
    .kuangao(100%, 180rpx);
}

.search-box {
    position: sticky; 
	top: 0; 
	z-index: 1;
	overflow: hidden;
	background-color: #fff;
	.search {
		position: relative;
		z-index: 2;
		display: flex;

		.location {
			display: flex;
			align-items: center;
			width: 16%;
            .down{
				margin-top: 5px;
				width: 0px;
				height: 0px;
				border: 5px solid transparent;
				border-top-color: #fff;   

			}
			.locationName {
				text-align: right;
				.fontsize(26rpx);
				font-family: PingFang SC;
				font-weight: 500;
				// color: @text-color2;
				 color:#ffff;
				margin: -5rpx 8rpx;
				width: 100rpx;
				overflow: hidden; //溢出隐藏
				white-space: nowrap; //禁止换行
				text-overflow: ellipsis; //...
			}

			.img1 {
				.kuangao(23rpx, 30rpx);
			}

			.img2 {
				.kuangao(25rpx, 25rpx);
			}
		}
		.weui-search-bar {
			.paddings(18rpx, 28rpx, 32rpx, 24rpx);
            /* #ifdef MP-ALIPAY */
			.paddings(2rpx, 28rpx, 2rpx, 24rpx);
            /* #endif */
			display: flex;
		}

		.weui-icon-search {
			margin-right: 8px;
			font-size: inherit;
		}

		.weui-icon-search_in-box {
			position: absolute;
			left: 10rpx;
			top: 12rpx;
            /* #ifdef MP-ALIPAY */
			top: 16rpx;
            /* #endif */
		}

		.weui-search-bar__text {
			display: inline-block;
			font-size: 14px;
			vertical-align: middle;
		}

		.weui-search-bar__form {
			flex: auto;
			background: #FFFFFF;
			border: 1rpx solid rgba(231, 242, 250, 0.5);
			box-shadow: 1rpx 4rpx 20rpx 0rpx rgba(139, 153, 167, 0.2);
			opacity: 0.9;
			border-radius: 35rpx;
			.paddings(10rpx, 10rpx, 10rpx, 33rpx);
            /* #ifdef MP-ALIPAY */
			.paddings(2rpx, 10rpx, 2rpx, 33rpx);
            /* #endif */
		}

		.weui-search-bar__box {
			position: relative;
			padding-left: 30px;
			padding-right: 30px;
			width: 100%;
			box-sizing: border-box;
			z-index: 1;
		}

		.weui-search-bar__input {
			height: 28px;
			line-height: 28px;
			font-size: 14px;
			width: 100%;
		}

		.weui-icon-clear {
			position: absolute;
			top: 0;
			right: 0;
			padding: 7px 8px;
			font-size: 0;
		}

		.weui-search-bar__label {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 2;
			border-radius: 3rpx;
			text-align: center;
			color: #9B9B9B;
			background: #FFFFFF;
			line-height: 28px;
		}

		.weui-search-bar__cancel-btn {
			margin-left: 10px;
			line-height: 28px;
			color: #09BB07;
			white-space: nowrap;
			font-size: 30rpx;
		}

		.img {
			width: 44rpx;
			height: 44rpx;
			margin-top: 36rpx;

            /* #ifdef MP-ALIPAY */
			width: 36rpx;
			height: 36rpx;
			margin-top: 24rpx;
            /* #endif */
		}

		.tipInfo {
			.kuangao(14rpx, 14rpx);
			.position(absolute, 20rpx, 34rpx, 0, auto);
			.borderradius(7rpx, 7rpx, 7rpx, 7rpx);
			background: @orange;
		}
	}
}

.header {
    position: relative;

    .top1 {
        .position(absolute, 116rpx, 0, 0, 0);

    }

    .top2 {
        .position(absolute, 145rpx, 0, 0, 0);
    }

    .header-top {
        width: 100%;
        .position(relative, 0, auto, auto, 0);
    }
}

.swiper-banner {
    height: 302rpx;
    margin: 0px 24rpx;
}

.message {
    display: flex;
    align-items: center;
    // height: 67rpx;
    padding: 40rpx 30rpx 40rpx 33rpx;
    margin: 32rpx 24rpx;
    background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
    border: 2rpx solid #FFFFFF;
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    border-radius: 16rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: @text-color1;

    .img {
        width: 51rpx;
        height: 38rpx;
        margin-right: 27rpx;
    }

    .message-swiper {
        width: 638rpx;
        height: 48rpx;
        line-height: 48rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: @text-color1;

        .text {
            -webkit-box-orient: vertical; // 避免压缩后删除此行
            -webkit-line-clamp: 1; // 显示省略号行数
            display: -webkit-box;
            overflow: hidden;
            /*隐藏*/
            white-space: nowrap;
            /*不换行*/
            text-overflow: ellipsis;
            /* 超出部分省略号 */
        }
    }
}

.swiper-item-images {
    .kuangao(702rpx, 302rpx);
    .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
}

.advertisementImg {
    .kuangao(702rpx, 186rpx);
    .margins(0, 24rpx, 0, 24rpx);
    .borderradius(20rpx, 20rpx, 20rpx, 20rpx);
    .margins(0, 5rpx, 0, 5rpx);
}

.advert1 {
    margin-left: 12rpx;
    image {
        box-shadow: 4px 7px 20px 0px rgba(166, 171, 179, 0.24)
    }
}

.advert2 {
    .kuan(96%);
    margin: 0 auto;
    display: flex;

    image {
        .kuangao(349rpx, 200rpx);
        .borderradius(20rpx, 20rpx, 20rpx, 20rpx);
        .margins(0, 9rpx, 14rpx, 5rpx);
        box-shadow: 4px 7px 20px 0px rgba(166, 171, 179, 0.24)
    }
}

.advert3 {
    .kuan(96%);
    margin: 0 auto;

    image {
        .kuangao(350rpx, 200rpx);
        .borderradius(20rpx, 20rpx, 20rpx, 20rpx);
        .margins(0, 5rpx, 14rpx, 5rpx);
        box-shadow: 4px 7px 20px 0px rgba(166, 171, 179, 0.24)
    }

    .advertisementImg {
        .kuan(100%);
        margin: 0 auto;
        display: block;
        .borderradius(20rpx, 20rpx, 20rpx, 20rpx);
        .margins(0, 5rpx, 0, 5rpx);
    }
}

.advert4 {
    .kuan(96%);
    margin: 0 auto;

    image {
        .kuangao(229rpx, 327rpx);
        .borderradius(20rpx, 20rpx, 20rpx, 20rpx);
        .margins(0, 5rpx, 14rpx, 5rpx);
        box-shadow: 4px 7px 20px 0px rgba(166, 171, 179, 0.24)
        // border:1rpx solid red;
    }

    .advertisementImg {
        .kuangao(100%, 186rpx);
        margin: 0 auto;
        display: block;
        .borderradius(20rpx, 20rpx, 20rpx, 20rpx);
        .margins(0, 5rpx, 0, 5rpx);
    }
}

.advert5 {
    .kuan(96%);
    margin: 0 auto;

    image {
        .kuangao(230rpx, 327rpx);
        .borderradius(20rpx, 20rpx, 20rpx, 20rpx);
        .margins(0, 5rpx, 14rpx, 5rpx);
        box-shadow: 4px 7px 20px 0px rgba(166, 171, 179, 0.24)
    }

    .hengtu {
        .kuangao(350rpx, 200rpx);
        .borderradius(20rpx, 20rpx, 20rpx, 20rpx);
        .margins(0, 5rpx, 14rpx, 5rpx);
    }
}

.advert6 {
    .kuan(96%);
    margin: 0 auto;

    image {
        .kuangao(230rpx, 327rpx);
        .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
        .margins(0, 5rpx, 14rpx, 5rpx);
        box-shadow: 4px 7px 20px 0px rgba(166, 171, 179, 0.24)
    }

    .hengtu {
        .kuangao(350rpx, 200rpx);
        .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
        .margins(0, 5rpx, 14rpx, 5rpx);

    }

    .advertisementImg {
        .kuangao(100%, 186rpx);
        margin: 0 auto;
        display: block;
        .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
        .margins(0, 5rpx, 0, 5rpx);
    }
}

.info {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 32rpx;

    .user_info {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 30rpx 0 6rpx 0;
        position: relative;
        margin-right: 15rpx;
        .kuangao(343rpx, 288rpx);
        background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
        .borders(2rpx, #FFFFFF);
        box-shadow: 4px 7px 20px 0px rgba(166, 171, 179, 0.24);
        .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
		box-sizing: border-box;

        .price {
			font-size: 48rpx;
			font-family: DIN;
			font-weight: bold;
			color: #000000;
		}
		.info1 {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .img {
            .kuangao(124rpx, 109rpx);
            .margins(8rpx, auto, auto, auto);
        }

        .showStatus {
            .fontsize(24rpx);
            font-family: PingFang SC;
            font-weight: 400;
            color: #606266;
            .margins(-5rpx, 0rpx, 5rpx, 0rpx);
        }

        .status {
            .fontsize(24rpx);
            font-family: PingFang SC;
            font-weight: 400;
            color: #606266;
            .margins(5rpx, 0rpx, 5rpx, 0rpx);
        }

        .showPrice {
            .fontsize(34rpx);
            font-family: DIN;
            font-weight: bold;
            color: @orange;
        }

        .showCharg {
            .fontsize(26rpx);
            font-family: DIN;
            font-weight: bold;
            color: @text-color3;
        }

        .num {
            .fontsize(34rpx);
            font-family: DINAlternate;
            font-weight: bold;
            color: @orange;
        }

        .text {
            .fontsize(24rpx);
            font-family: PingFang SC;
            font-weight: 400;
            color: #606266;
        }

        .recharge {
            .kuangao(120rpx, 48rpx);
            .lineheight(48rpx);
            margin-left: 192rpx;
            .borders(1rpx, @blue);
            .borderradius(24rpx, 24rpx, 24rpx, 24rpx);
            .fontsize(26rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @blue;
        }
		.recharge2 {
		    .kuangao(120rpx, 48rpx);
		}

        .fleet {
            .kuangao(140rpx, 56rpx);
            position: absolute;
            left: 12rpx;
            bottom: 12rpx;
        }
    }

    .all_info {
        .status {
            .fontsize(28rpx);
            color: @text-color1;
            font-family: PingFang SC;
        }

        .dingdan {
            .fontsize(24rpx);
            font-family: PingFang SC;
            font-weight: 400;
            color: @text-color4;
            padding-top: 10rpx;
        }

        .fleet {
            margin-top: -58rpx;
        }
    }

    .modular {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        .kuangao(343rpx, 136rpx);
        background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
        .borders(2rpx, #FFFFFF);
        box-shadow: 4px 7px 20px 0px rgba(166, 171, 179, 0.24);
        .borderradius(16rpx, 16rpx, 16rpx, 16rpx);

        .img {
            .kuangao(70rpx, 75rpx);
            margin-right: 32rpx;
        }

        .txt1 {
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @text-color1;
            margin-bottom: 20rpx;
            text-align: left;
        }

        .txt2 {
            .fontsize(24rpx);
            font-family: PingFang SC;
            font-weight: 400;
            color: @text-color4;
            text-align: left;
        }
    }
}

.head-nav {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
    padding: 20rpx 32rpx 20rpx 8rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #606266;
	background: #FFFFFF;

    .activite {
        .fontsize(34rpx);
        font-weight: bold;
        color: @blue;
    }

    .img1 {
        .kuangao(30rpx, 30rpx);
        position: absolute;
        margin-left: 50rpx;
    }

    .img2 {
        .kuangao(72rpx, 6rpx);
        position: absolute;
        margin-top: 46rpx;
        margin-left: -68rpx;
    }

    .nav {
		display: flex;
		align-items: center;
		.fontsize(28rpx);

		.nav-item {
			margin: 0 24rpx;
		}
    }

    .all {
        display: flex;
		align-items: center;
        .fontsize(26rpx);
        color: #303133;

        .allSite {
            .kuangao(25rpx, 25rpx);
            margin-right: 11rpx;
        }
    }
}

.chargeOne {
    // background: rgba(48, 49, 51, 0.9);
    background-color: #444547;
    .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
    // position: fixed;
    // bottom: 190rpx;
    // left: 24rpx;
	// right: 24rpx;
    margin-top: 20rpx;
    .paddings(30rpx, 30rpx, 0, 30rpx);
   // z-index: 4;

    .top {
        display: flex;
        justify-content: space-between;
        .fontsize(30rpx);
        align-items: center;
        font-family: PingFang SC;
        font-weight: 500;
        color: @white-color;
        padding-bottom: 24rpx;
        border-bottom: 1px solid @text-color4;

        .img {
            .kuangao(13rpx, 22rpx);
        }
    }

    .charge {
        display: flex;
        margin: 24rpx 0;

        .img {
            .kuangao(150rpx, 150rpx);
            // .margins(0, 47rpx, 0, 39rpx);
        }

        .progress {
            position: absolute;
            top: 48%;
            left: 50%;
            transform: translate(-50%, -50%);
            .fontsize(26rpx);
            font-family: DIN;
            font-weight: bold;
            color: @white-color;
			z-index: 1;
        }

        .charge_info {
            margin-left: 24rpx;
            margin-top: 24rpx;
            flex: 1;
        }

        .charge_cost {
            margin-top: 24rpx;

            .price {
                font-size: 36rpx;
                font-family: DIN;
                font-weight: bold;
                color: #FF754F;
            }

            .txt2 {
                font-size: 32rpx;
                font-family: PingFang-SC-Medium;
                font-weight: Medium;
                color: #FF754F;
            }
        }

        .txt1 {
            .fontsize(26rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @white-color;
            line-height: 49rpx;
        }
    }
}

.unpaid {
    // .kuangao(86%, 90rpx);
    background-color: #444547;
    // background: rgba(48, 49, 51, 0.9);
    .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
    // position: fixed;
    // bottom: 160rpx;
    // left: 24rpx;
	// right: 24rpx;
    .lineheight(90rpx);
    .paddings(0, 30rpx, 0, 30rpx);
    // z-index: 4;

    .top {
        display: flex;
        justify-content: space-between;
        .fontsize(30rpx);
        align-items: center;
        font-family: PingFang SC;
        font-weight: 500;
        color: @white-color;

        .pay {
            .fontsize(26rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @green;
        }

        .img {
            .kuangao(13rpx, 22rpx);
            margin-left: 17rpx;
        }
    }

}

.chargeMore {
    // background: rgba(48, 49, 51, 0.9);
    background-color: #444547;
    .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
    // position: fixed;
    // bottom: 190rpx;
    // left: 24rpx;
	// right: 24rpx;
    .paddings(30rpx, 30rpx, 0, 30rpx);
    z-index: 4;
    padding-bottom: 25rpx;
    margin-top: 10rpx;
    .top {
        display: flex;
        justify-content: space-between;
        .fontsize(30rpx);
        align-items: center;
        font-family: PingFang SC;
        font-weight: 500;
        color: @white-color;
        padding-bottom: 20rpx;


        .img {
            .kuangao(13rpx, 22rpx);
        }

    }

    .chargeItem {
        border-bottom: 1rpx dashed #C0C4CC;
        margin-bottom: 20rpx;

        .equipment {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12rpx;

            .txt1 {
                .fontsize(28rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @white-color;
            }

            .txt2 {
                .fontsize(24rpx);
                font-family: PingFang SC;
                font-weight: 400;
                color: @white-color;
            }

            .txt3 {
                .fontsize(26rpx);
                font-family: PingFang SC;
                font-weight: bold;
                color: #85E149;
            }

            .txt4 {
                .fontsize(24rpx);
                font-family: PingFang SC;
                font-weight: 400;
                color: @white-color;

                .money {
                    .fontsize(30rpx);
                    font-family: DIN Alternate;
                    font-weight: bold;
                    color: #FF754F;
                }

                .unit {
                    .fontsize(26rpx);
                    font-family: PingFang-SC-Medium;
                    font-weight: Medium;
                    color: #FF754F;
                }
            }
        }
    }
}

.van-button__text {
    width: 270rpx;
    height: 88rpx;
    background: linear-gradient(105deg, #2B99FF, #1B8CF5);
    box-shadow: 0px 3px 6px 0px rgba(0, 110, 212, 0.3);
    border-radius: 44rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 88rpx;
}

.announcement-popup {
    .van-popup__close-icon--top-right {
        top: 5rpx;
        right: 5rpx;
    }

    .announcement {
        .kuangao(580rpx, 620rpx);
        background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
        .borders(2rpx, @white-color);
        box-shadow: 4rpx 7rpx 20rpx 0px rgba(166, 171, 179, 0.24);

        .announcement-header {
            height: 178rpx;

            .announcement-header-img {
                .kuangao(100%, 100%);
            }
        }

        .announcement-title {
            text-align: center;
            font-size: 38rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: var(--textColor);
            margin: 37rpx 0;
        }

        .announcement-body {
            padding: 0 41rpx;
            margin-bottom: 50rpx;
            word-break: break-all;
            .gao(170rpx);
            overflow-y: scroll;
        }

        .announcement-close {
            width: 400rpx;
            height: 88rpx;
            position: absolute;
            bottom: 20rpx;
            left: 50%;
            transform: translateX(-50%);
            background: var(--btnColor);
            box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
            border-radius: 44rpx;
            font-size: 30rpx;
            line-height: 88rpx;
            text-align: center;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            margin: 0 auto;
        }
    }
}

.coupons {
    width: 701rpx;
    height: 914rpx;
    position: relative;

    .coupons-bg-img {
        width: 100%;
        height: 100%;
    }

    .coupons-delete {
        position: fixed;
        bottom: 5rpx;
        left: 50%;
        width: 71rpx;
        height: 71rpx;
        background-color: #000;
        opacity: 0.2;
        border-radius: 50%;
        transform: translate(-50%, 0);

        .coupons-delete-img {
            width: 100%;
            height: 100%;
        }
    }

    .coupons-name {
        .position(absolute, 240rpx, auto, auto, 50%);
        transform: translate(-50%, 0);
        font-size: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #654726;
    }

    .coupons-nums {
        .position(absolute, 602rpx, auto, auto, 50%);
        transform: translate(-50%, 0);
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #654726;
    }

    .coupons-btn {
        .position(absolute, 662rpx, auto, auto, 50%);
        transform: translate(-50%, 0);
        width: 373rpx;
        height: 82rpx;
        line-height: 82rpx;
        background: #271A07;
        border-radius: 41rpx;
        font-size: 37rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        text-align: center;
        color: #F9EAC9;
    }

    .coupons-list {
        width: 428rpx;
        height: 268rpx;
        transform: translate(-50%, 0);
        background-color: #F5D192;
        overflow-y: scroll;
        .position(absolute, 304rpx, auto, auto, 50%);

        .coupons-list-item {
            margin: 16rpx 0;

            .coupons-list-item-content {
                width: 100%;
                height: 126rpx;
                background-color: #fff;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .coupons-list-item-content1 {
                    margin-left: 40rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100%;

                    .vertical {
                        height: 100%;
                        width: 1rpx;
                        background-color: #F5D192;
                        margin: 0 20rpx 0 55rpx;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: center;

                        .circle1 {
                            width: 15rpx;
                            height: 15rpx;
                            border-radius: 50%;
                            background-color: red;
                            transform: translateY(-50%);
                            background-color: #F5D192;
                        }

                        .circle2 {
                            width: 15rpx;
                            height: 15rpx;
                            border-radius: 50%;
                            background-color: red;
                            transform: translateY(50%);
                            background-color: #F5D192;
                        }
                    }

                    .vouchers-name {
                        font-size: 30rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #18181A;
                    }

                    .expiry-date {
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #606266;
                        margin-top: 23rpx;
                    }
                }

                .coupons-list-item-nums {

                    // margin-left: 69rpx;
                    .vouchers-amount {
                        font-size: 30rpx;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #FC724C;
                    }

                    .full-reduction {
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #909399;
                        margin-top: 23rpx;
                    }
                }

                .site-certificate {
                    width: 56rpx;
                    height: 100%;
                    background-color: #f7c776;
                    padding: 2rpx 18rpx 0 18rpx;
                    color: #2A1D0A;
                    white-space: pre-wrap;
                    font-size: 20rpx;

                }
            }
        }
    }
}

.coupons2 {
    width: 580rpx;
    height: 620rpx;
    border-radius: 16rpx;
    overflow: hidden;

    .coupons2-swiper {
        width: 100%;
        height: 100%;

        .coupons2-swiper-item {
            .swiperitem {
                width: 100%;
                height: 100%;
            }
        }
    }

    .coupons2-delete {
        position: absolute;
        top: 0rpx;
        right: 0;
    }
}


.chargeOneSoc {
    position: relative;
    // margin: auto;
    text-align: center;
}

.pop_title{
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #1A1A1A;
	text-align: center;
	.paddings(17rpx, 32rpx, 24rpx, 26rpx);
	border-bottom: 1rpx solid @text-color5;
}


.type {
    .margins(39rpx, 0, 0, 35rpx);

    .type_title {
        .fontsize(34rpx);
        font-family: PingFang SC;
        font-weight: bold;
        color: @text-color2;
    }

    .type_list {
        display: flex;
        flex-wrap: wrap;

        .type_itme {
            .kuangao(160rpx, 64rpx);
            padding: 0 28rpx;
            box-sizing: border-box;
            height: 64rpx;
            .lineheight(64rpx);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            .margins(24rpx, 16rpx, 0, 0);
            text-align: center;
            background: @text-color6;
            .borderradius(32rpx, 32rpx, 32rpx, 32rpx);
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color3;
        }

        .type_itme_sel {
            .kuangao(160rpx, 64rpx);
            .lineheight(64rpx);
            padding: 0 18rpx;
            box-sizing: border-box;
            height: 64rpx;
            .margins(24rpx, 16rpx, 0, 0);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            text-align: center;
            background: rgba(20, 135, 250, 0.06);
            .borderradius(32rpx, 32rpx, 32rpx, 32rpx);
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: bold;
            .borders(1rpx, @blue);
            color: @blue;
        }
    }
}

.pop_top {
    .margins(0, 0, 200rpx, 0);
    .type_btn {
        display: flex;
        justify-content: center;
        position: fixed;
        bottom: 0;
        width: @percent;
        background: #fff;
        padding: 49rpx 0;
        align-items: center;
        .btn1 {
            .kuangao(270rpx, 88rpx);
            .lineheight(88rpx);
            .borders(1rpx, @text-color4);
            text-align: center;
            .borderradius(44rpx, 44rpx, 44rpx, 44rpx);
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @text-color4;
        }

        .btn2 {
            .kuangao(270rpx, 88rpx);
            .lineheight(88rpx);
            text-align: center;
            margin-left: 50rpx;
            background: var(--btnColor);
            box-shadow: 0px 3px 6px 0px rgba(0, 110, 212, 0.3);
            .borderradius(44rpx, 44rpx, 44rpx, 44rpx);
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @white-color;
        }
    }
}

.p-category {
    height: 100vh;
    display: flex;
    flex-direction: column;

    &-header {
        background: #fff;

        &-wrap {
            display: flex;
            align-items: center;
            padding: 20rpx 0 32rpx;
            height: 104rpx;
        }

        .icon {
            width: 48rpx;
            height: 48rpx;
            display: block;
            padding: 0 16rpx 0 32rpx;
        }

        .title {
            font-size: 40rpx;
            font-weight: 600;
            color: #121a1e;
            line-height: 56rpx;
        }
    }

    &-container {
        flex: 1;
        display: flex;
        overflow: hidden;
        // height: calc(80% - 106rpx);
        ;
        background-color: #F5F7FA;
    }

    &-left {
        .kuan(220rpx);
    }

    &-menu {
        height: 80%;
        z-index: 1;

        &-item {
            .paddings(23rpx, 0, 23rpx, 0);
            text-align: center;
            background: #F5F7FA;
            transition: all 0.3s linear;
            position: relative;
            border-bottom: 2rpx solid @white-color;

            &-label1 {
                .fontsize(26rpx);
                .margins(23rpx, 0, 19rpx, 0);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color3;
            }

            &-label2 {
                .fontsize(26rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color4;
            }

            &-line {
                width: 8rpx;
                height: 36rpx;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
            }

            &.active {
                background: @white-color;
                .borderradius(16rpx, 0rpx, 0rpx, 0rpx);

                .p-category-menu-item-label {
                    .fontsize(28rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: @text-color3;
                }
            }
        }
    }

    &-right {
        .kuan(calc(@percent - 220rpx));
        background: @white-color;
        .borderradius(0rpx, 16rpx, 16rpx, 0rpx);

        &-scroll {
            box-sizing: border-box;
        }
    }

    &-store {
        display: flex;
        align-items: center;
        width: @percent;
        padding: 0 0 40rpx 32rpx;

        &-label {
            font-size: 26rpx;
            font-weight: bold;
            color: #7b8082;
            line-height: 44rpx;
            padding-right: 40rpx;
            white-space: nowrap;

            &.on {
                font-size: 30rpx;
                color: #121a1e;
            }
        }
    }

    &-first {
        .paddings(0, 32rpx, 0rpx, 24rpx);

        &-label {
            font-size: 30rpx;
            font-weight: 600;
            color: #121a1e;
            line-height: 44rpx;
            padding-bottom: 24rpx;
        }
    }

    &-second {
        .paddings(30rpx, 0rpx, 24rpx, 0px);
        .fontsize(28rpx);
        font-family: PingFang SC;
        font-weight: 500;
        color: @text-color3;
    }
}

.noList {
    text-align: center;
    font-size: 24rpx;
    color: #9699A6;
    padding: 24rpx;
}
.content_list {
	    height: 800rpx;
	    overflow-x: hidden;
	    .scroll_view_style{
			height: 100%;
		}
	}
	.content_list_Region {
		    height: 400rpx;
		    overflow-x: hidden;
		    .scroll_view_style{
				height: 100%;
			}
		}


        .unpaCon{
            position: fixed;
            bottom: 190rpx;
            left: 24rpx;
            right: 24rpx;
            z-index: 4;
            margin-top: 10rpx;
        }